<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr md-row>
            <th colspan=3>Database Backups</th>
            <th>
                <span style="display:inline-block;;margin: 2px;" ng-click="saveBackupType(selectedLogicalBackup,selectedPhysicalBackup,selectedBinlogBackup,selectedBinlogBackupScript)"><i style="display:inline-block;;margin: 2px;" class="fa fa-save"></i></span>
            </th>
        </tr>
        <tr>
            <td colspan=4>
                Logical Backup: <span style="display:inline-block;;margin: 2px;" class="label label-success">{{selectedCluster.config.backupLogicalType }}</span>
                <md-select name="selectedLogicalBackup" ng-model="selectedLogicalBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.backupLogicalType}}" ng-repeat="(key, value) in settings.backupLogicalList" ng-value="key">{{key}}</md-option>
                </md-select>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                Mysqldump options: <br/>
                <div ng-if="!isEditing['backupMysqldumpOptions']" style="display: flex;">
                    <input type="text" ng-model="selectedCluster.config.backupMysqldumpOptions" readonly placeholder="Original text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="startEditing('backupMysqldumpOptions', selectedCluster.config.backupMysqldumpOptions)">Edit</button>
                </div>
                <div ng-if="isEditing['backupMysqldumpOptions']" style="display: flex;">
                    <input type="text" ng-model="editableData.backupMysqldumpOptions" placeholder="Edit text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="setSettingsEncode('backup-mysqldump-options',editableData.backupMysqldumpOptions)">Save</button>
                    <button ng-click="cancelEditing('backupMysqldumpOptions')">Cancel</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                MyDumper options: <br/>
                <div ng-if="!isEditing['backupMyDumperOptions']" style="display: flex;">
                    <input type="text" ng-model="selectedCluster.config.backupMyDumperOptions" readonly placeholder="Original text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="startEditing('backupMyDumperOptions', selectedCluster.config.backupMyDumperOptions)">Edit</button>
                </div>
                <div ng-if="isEditing['backupMyDumperOptions']" style="display: flex;">
                    <input type="text" ng-model="editableData.backupMyDumperOptions" placeholder="Edit text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="setSettingsEncode('backup-mydumper-options',editableData.backupMyDumperOptions)">Save</button>
                    <button ng-click="cancelEditing('backupMyDumperOptions')">Cancel</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                MyLoader options: <br/>
                <div ng-if="!isEditing['backupMyLoaderOptions']" style="display: flex;">
                    <input type="text" ng-model="selectedCluster.config.backupMyLoaderOptions" readonly placeholder="Original text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="startEditing('backupMyLoaderOptions', selectedCluster.config.backupMyLoaderOptions)">Edit</button>
                </div>
                <div ng-if="isEditing['backupMyLoaderOptions']" style="display: flex;">
                    <input type="text" ng-model="editableData.backupMyLoaderOptions" placeholder="Edit text here" style="flex: 1; margin-right: 8px;"/>
                    <button ng-click="setSettingsEncode('backup-myloader-options',editableData.backupMyLoaderOptions)">Save</button>
                    <button ng-click="cancelEditing('backupMyLoaderOptions')">Cancel</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                Physical Backup: <span style="display:inline-block;;margin: 2px;" class="label label-success">{{selectedCluster.config.backupPhysicalType }}</span>
                <md-select name="selectedPhysicalBackup" ng-model="selectedPhysicalBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.backupPhysicalType}}" ng-repeat="(key, value) in settings.backupPhysicalList" ng-value="key">{{key}}</md-option>
                </md-select>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                Binlog Backup: <span style="display:inline-block;;margin: 2px;" class="label label-success">{{selectedCluster.config.binlogCopyMode }}</span>
                <md-select name="selectedBinlogBackup" ng-model="selectedBinlogBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.binlogCopyMode}}" ng-repeat="(key, value) in settings.backupBinlogList" ng-value="key">{{key}}</md-option>
                </md-select>
            </td>
        </tr>
        <tr ng-hide="selectedBinlogBackup != 'script'">
            <td colspan=4>Backup Binlog Script Path</td>
        </tr>
        <tr ng-hide="selectedBinlogBackup != 'script'">
            <td colspan=4>
                <span>
                    <input type="text" name="selectedBinlogBackupScript" value="selectedCluster.config.binlogCopyScript" id="selectedBinlogBackupScript" maxlength="120" size="80" ng-model="selectedBinlogBackupScript" />
                </span>
            </td>
        </tr>
        <tr>
            <th colspan=4>Backup keep previous until valid</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false" ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.backupKeepUntilValid" ng-click="switchsettings('backup-keep-until-valid')" aria-label="Keep previous backup until next backup is valid">
                    <span ng-if="selectedCluster.config.backupKeepUntilValid" class="label label-primary">On</span><span ng-if="!selectedCluster.config.backupKeepUntilValid" class="label label-warning">Off</span>
                </md-switch>
            </td>
        </tr>
    </table>
</md-card>
<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr>
            <th colspan=4>Use Compression For Backup</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false" ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.compressBackups" ng-click="switchsettings('compress-backups')" aria-label="Use Compression For Backup">
                    <span ng-if="selectedCluster.config.compressBackups" class="label label-primary">On</span><span ng-if="!selectedCluster.config.compressBackups" class="label label-warning">Off</span>
                </md-switch>
            </td>
        </tr>
        <tr>
            <td colspan=4>
                Backup Buffer Size: <span style="display:inline-block;;margin: 2px;" class="label label-success">{{ formatBytes(selectedCluster.config.sstSendBuffer,0) }}</span>
                <span class="pull-right" ng-click="setsettings('sst-send-buffer',selectedBufferSize)"><i style="display:inline-block;;margin: 2px;" class="fa fa-save"></i></span>
                <md-select name="selectedBufferSize" ng-model="selectedBufferSize">
                    <md-option ng-selected="{{size ==  selectedCluster.config.sstSendBuffer}}" ng-repeat="size in bufferList" ng-value="size">{{ formatBytes(size,0) }}</md-option>
                </md-select>
            </td>
        </tr>
    </table>
</md-card>
<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr>
            <th colspan=4>Backup Binlogs</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false" ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.backupBinlogs" ng-click="switchsettings('backup-binlogs')" aria-label="Auto rejoin using pseudo GTID">
                    <span ng-if="selectedCluster.config.backupBinlogs" class="label label-primary">On</span><span ng-if="!selectedCluster.config.backupBinlogs" class="label label-warning">Off</span>
                </md-switch>
            </td>
        </tr>
        <tr>
            <th colspan=4>Backup Binlogs Keep files</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-slider ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false" ng-value="selectedCluster.config.backupBinlogsKeep" md-discrete flex ng-model="selectedBackupBinlogsKeep" ng-change="changebackupbinlogskeep(selectedBackupBinlogsKeep)" step="1" min="0" max="10" aria-label="Backup binlogs keep files">
                </md-slider>
                <span class="label label-primary">{{selectedCluster.config.backupBinlogsKeep}}</span>
            </td>
        </tr>
    </table>
</md-card>
<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr>
            <th colspan=4>Use Restic For Backup</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false" ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.backupRestic" ng-click="switchsettings('backup-restic')" aria-label="Use Restic for Backup">
                    <span ng-if="selectedCluster.config.backupRestic" class="label label-primary">On</span><span ng-if="!selectedCluster.config.backupRestic" class="label label-warning">Off</span>
                </md-switch>
            </td>
        </tr>
    </table>
</md-card>